<template>
	<view class="page-box">
		<cu-custom :isBack="true" :backColor="headerBgColor">
			<block slot="backText"></block>
			<block slot="content"><text class="nav-title shopro-selector-rect">详情</text></block>
		</cu-custom>
		<view class="wrapper">
			<view class="banner">
				<swiper
					class="swiper"
					:indicator-dots="indicatorDots"
					:autoplay="autoplay"
					:interval="interval"
					:duration="duration"
				>
					<swiper-item class="swiper_item" v-for="(item, index) in goodsInfo.images" :key="index">
						<image :src="item" mode="aspectFill" class="activity-img"></image>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- 内容展示区域 -->
		<view class="content">
			<view class="content-bg">
				<view class="content-box one">
					<view class="content-price">
						<text>￥</text>
						{{ price_range }}
					</view>
					<view class="content-ico" @tap="onShare">
						<image src="../../static/imgs/logo/share.png" mode=""></image>
					</view>
				</view>
				<view class="content-box two">
					<view class="content-title">{{ goodsInfo.title }}</view>
				</view>
				<!-- 选项切换 -->
				<!-- <view class="content-box four">
					<view class="tab-box">
						<view :class="['tab-list',listIndex==0?'active-tab-list':'']" @click="listIndex=0">商品详情</view>
						<view :class="['tab-list',listIndex==1?'active-tab-list':'']" @click="listIndex=1">成交记录</view>
					</view>
					<view class="content-detail" v-show="listIndex == 0">
						<image :src="goodsInfo.content"></image>
					</view>
					<view class="content-record" v-show="listIndex == 1">

						<view class="record-top">
							<text>买家</text>
							<text>成交时间</text>
							<text>数量</text>
						</view>
						<view class="record-line"></view>
						<block v-for="(item,index) in record" :key="index">
							<view class="record-bott">
								<text>{{item.nickname}}</text>
								<text>{{item.paytime}}</text>
								<text>{{item.goods_num}}</text>
							</view>
						</block>
					</view>
				</view> -->
			</view>
			<view class="content-box three">
				<view class="box-list">
					<view class="list-items">
						<view class="name">运费：</view>
						<view class="title">无需配送</view>
					</view>
					<view class="tit">已售{{ goodsInfo.sales }}</view>
				</view>
				<view class="line"></view>
				<view class="box-list" @tap="showSku = true">
					<view class="list-items">
						<view class="name">规格：</view>
						<view class="title">请选择规格</view>
					</view>
					<text class="cuIcon-right"></text>
				</view>
				<block  v-if="goodsInfo.service.length">
					<view class="line"></view>
					<view class="box-list" @click="showModal = true">
						<view class="list-items">
							<view class="name">说明：</view>
							<view class="title">在所使用日期内当天有效，购买后立即生效...</view>
						</view>
						<text class="cuIcon-right"></text>
					
					</view>
				</block>
				<sh-serve v-model="showServe" :serveList="goodsInfo.service"></sh-serve>
				
				<view class="line"></view>
				<view class="box-list" @click="showcmt = true">
					<view class="list-items">
						<view class="name">评论：</view>
						<view class="title">{{commentNum ? `总共 ${commentNum} 条评价` : '暂无评价'}}</view>
					</view>
					<text class="cuIcon-right"></text>
				</view>
			</view>
			<!-- 评论111111111111 -->
			<!-- <view class="content-box three padding-lg" style="min-height: 300rpx;">
				<view class="goods-comment">
					<view v-for="(item,index) in data" :key="index">
						
					</view>
					<block v-for="(item,index)  in commentList" :key="index">
						<sh-comment :comment="item"></sh-comment>
					</block>
					<view class="empty-box x-c" v-if="!commentList.length">
						<shopro-empty :isFixed="false" :emptyData="emptyData"></shopro-empty>
					</view>
					<view class="more-box x-c" v-if="commentNum > 3">
						<button
							class="cu-btn more-btn x-f"
							@tap="jump('/pages/goods/comment-list', { goodsId: goodsInfo.id })"
						>
							查看全部
							<text class="cuIcon-right"></text>
						</button>
					</view>
				</view>
			</view> -->
			<u-popup v-model="showcmt" mode="bottom" border-radius="14">
					<view class="goods-comment" style="min-height: 600rpx;">
						<view v-for="(item,index) in data" :key="index">
							
						</view>
						<block v-for="(item,index)  in commentList" :key="index">
							<sh-comment :comment="item"></sh-comment>
						</block>
						<view class="empty-box x-c" v-if="!commentList.length">
							<shopro-empty :isFixed="false" :emptyData="emptyData"></shopro-empty>
						</view>
						<view class="more-box x-c" v-if="commentNum > 3">
							<button
								class="cu-btn more-btn x-f"
								@tap="jump('/pages/goods/comment-list', { goodsId: goodsInfo.id })"
							>
								查看全部
								<text class="cuIcon-right"></text>
							</button>
						</view>
					</view>
			</u-popup>

			<!-- 更改 -->
			<view class="content-box four">
				<view class="name">商品详情</view>
				<view class="content-detail"><u-parse :html="goodsInfo.content"></u-parse></view>
			</view>
			<!-- 占位符 -->
			<view class="foot-box"></view>
		</view>
		<!-- 按钮展示区域 -->
		<view class="footer-btn">
			<!-- <view class="btn left" @tap="addCart">加入购物车</view> -->
			<view class="btn right" @tap="goPay">立即购买</view>
		</view>

		<!-- 说明模态框 -->
		<!-- <view class="model">
			<u-popup v-model="show" mode="bottom" border-radius="30" length="70%">
				
			
				<view class="modal-content content_box">
					<view class="serve-list" v-for="serve in goodsInfo.service" :key="index">
						<view class="title-box x-f">
							<image class="title-tag" :src="serve.image" mode=""></image>
							<text class="serve-title">{{ serve.name }}</text>
						</view>
						<view class="serve-detail">{{ serve.description }}</view>
					</view>
				</view>
				
				<view class="footer-btn"><view class="btn" @click="show = false">我知道了</view></view>
			</u-popup>
		</view> -->
		<view class="cu-modal bottom-modal " style="z-index: 999;" :class="{ show: showModal }"@tap="hideModal" catchtouchmove="true">
		
			<view class="cu-dialog server-modal" @tap.stop style="background: none;">
				<view class="server-modal-box page_box">
					<view class="modal-head x-c">
						<text class="head-title">服务保障</text>
						<text class="cuIcon-roundclosefill" @tap="hideModal"></text>
					</view>
					<view class="modal-content content_box">
						<view class="serve-list" v-for="serve in goodsInfo.service" :key="serve.title">
							<view class="title-box x-f">
								<image class="title-tag" :src="serve.image" mode=""></image>
								<text class="serve-title">{{ serve.name }}</text>
							</view>
							<view class="serve-detail">{{ serve.description }}</view>
						</view>
					</view>
					<view class="modal-foot x-c"><button class="cu-btn serve-btn" @tap="hideModal">确定</button></view>
				</view>
			</view>
		</view>

		<!-- 规格模态框 -->
		<view class="kind-model">
			<shopro-sku
				v-model="showSku"
				:goodsInfo="goodsInfo"
				:buyType="goodsInfo.activity_type == 'seckill' || detailType === 'score' ? 'buy' : buyType"
				:grouponBuyType="grouponBuyType"
				:goodsType="detailType === 'score' ? 'score' : 'goods'"
				@changeType="changeType"
				@getSkuText="getSkuText"
			></shopro-sku>
		</view>
		<!-- 分享组件 -->
		<shopro-share v-model="showShare" :goodsInfo="goodsInfo" :posterType="'goods'"></shopro-share>
	</view>
</template>

<script>
// import darkCalendar from 'components/darkCalendar/dark-calendar.vue';

import shComment from './sh-comment.vue';
// import shServe from 'components/sh-serve.vue';
export default {
	components: {
		shComment,
		
	},
	data() {
		return {
			headerBgColor: 'transparent',
			indicatorDots: true,
			autoplay: true,
			interval: 2000,
			duration: 500,
			imageURL: '../../static/imgs/logo/detail-bg.png',
			listIndex: 0,
			
			kindshow: false,
			currentSkuArray: [],
			currentSkuPrice: {},
			skuList: [],
			skuPrice: [],
			routeDetail: {},
			record: {},
			travelFlag: false, //是否选择出行套餐
			current: -1, //儿童和成人初始化
			showcmt:false,
			showcmt:false,
			showModal:false,
			
			
			inputs: [
				{
					outPeople: '',
					tel: '',
					phone: ''
				}
			],
			emptyData: {
				img: this.$IMG_URL + '/imgs/empty/comment_empty.png',
				tip: '暂无评价~'
			},
			addpeople: 1,
			showShare: false,
			buyType: 'sku',
			grouponBuyType: 'alone', //拼团购买方式。
			showSku: false,
			showServe: false,
			tools: this.$tools,
			goodsInfo: {
				sku: []
			},
			commentList: [], //商品评价列表
			commentNum: 0 //商品评价总数
		};
	},

	onLoad(options) {
		if (options.id) {
			this.getDetail(options.id);
			this.getRecord(options.id);
			this.getCommentList(options.id);
			this.getGoodsDetail();
			
		}
	},
	computed: {
		price_range() {
			let priceArr = this.skuPrice
				.map(e => {
					return e.price;
				})
				.sort();
			if (priceArr.length > 1) {
				return priceArr[0] + '-' + priceArr[priceArr.length - 1];
			} else {
				return priceArr[0];
			}
		}
	},
	methods: {
		// back() {
		//              uni.navigateBack({
		//              	delta:1
		//              })

		// },
		hideModal() {
			this.showModal = false;
		},
		open() {
			this.$refs.calendar.open();
		},
		confirm(e) {
			console.log(e);
		},
		getDetail(id) {
			let that = this;
			this.$apiBase('getDetail', {
				id: id
			}).then(res => {
				this.skuPrice = res.data.sku_price;

				if (res.code === 1) {
					that.$set(that, 'goodsInfo', res.data);
					that.setShareInfo({
						query: {
							url: 'goods-' + that.$Route.query.id
						},
						title: that.goodsInfo.title,
						image: that.goodsInfo.image
					});
				}
				console.log(this.goodsInfo.content, 'content');
				if (res.code == 0) {
					that.$tools.toast(res.msg);
				}
			});
		},
		getGoodsDetail() {
			let that = this;
			that.$api('goods.detail', {
				id: that.$Route.query.id
			}).then(res => {
				if (res.code === 1) {
					that.goodsInfo = res.data;
					console.log("that.goodsInfo: ",that.goodsInfo);
					that.getCommentList();
					that.setShareInfo({
						query: {
							url: 'goods-' + that.$Route.query.id
						},
						title: that.goodsInfo.title,
						image: that.goodsInfo.image
					});
				}
				if (res.code == 0) {
					that.$tools.toast(res.msg);
				}
			});
		},
		getCommentList(e) {
			let that = this;
			that.$api('goods_comment.list', {
				goods_id: e,
				per_page: 3,
				type: 'all'
			}).then(res => {
				if (res.code === 1) {
					that.commentList = res.data.data;
					console.log('that.commentList  :>> ', that.commentList );
					that.commentNum = res.data.total;
				}
			});
		},

		// 组件返回的type;
		changeType(e) {
			this.buyType = e;
		},
		// 组件返回的规格;
		getSkuText(e) {
			this.currentSkuText = e;
		},
		// 加入购物车
		addCart() {
			if (Boolean(uni.getStorageSync('token'))) {
				this.buyType = 'cart';
				this.showSku = true;
			} else {
				this.$store.commit('LOGIN_TIP', true);
			}
		},
		// 立即购买
		goPay() {
			if (Boolean(uni.getStorageSync('token'))) {
				this.buyType = 'buy';
				this.showSku = true;
			} else {
				this.$store.commit('LOGIN_TIP', true);
			}
		},
		// 拼团购买
		payGroupon(type) {
			if (Boolean(uni.getStorageSync('token'))) {
				if (type === 'groupon') {
					this.grouponBuyType = 'groupon';
				} else {
					this.grouponBuyType = 'alone';
				}
				this.buyType = 'buy';
				this.showSku = true;
			} else {
				this.$store.commit('LOGIN_TIP', true);
			}
		},
		// 立即秒杀。
		goSeckill() {
			if (Boolean(uni.getStorageSync('token'))) {
				if (this.activityRules.status !== 'waiting') {
					this.buyType = 'buy';
					this.showSku = true;
					console.log(this.buyType);
				} else {
					this.$tools.toast('秒杀暂未开始');
				}
			} else {
				this.$store.commit('LOGIN_TIP', true);
			}
		},

		// 获取成交记录数据
		getRecord(id) {
			this.$apiBase('record', {
				id: id
			}).then(res => {
				this.record = res.data.data;
				console.log(this.record);
				console.log(res);
			});
		},
		// 路由跳转
		jump(path, parmas) {
			this.showShare = false;
			this.$Router.push({
				path: path,
				query: parmas
			});
		},
		// 分享
		onShare() {
			this.showShare = true;
		}
	}
};
</script>

<style lang="scss">
	.modal-content {
		overflow-y: auto;
		.serve-list {
			padding-bottom: 40rpx;
	
			.title-tag {
				width: 38rpx;
				height: 38rpx;
				margin-right: 20rpx;
			}
	
			.serve-title {
				font-size: 28rpx;
				font-weight: bold;
			}
	
			.serve-detail {
				text-align: left;
				font-size: 26rpx;
				color: #999;
				line-height: 42rpx;
				padding-left: 58rpx;
				margin-top: 20rpx;
			}
		}
	}
.cu-custom {
	height: 0 !important;
}
.cu-custom .cu-bar {
	color: #fff;
}
.goods-comment {
	padding-top: 30rpx;
	min-height: 300rpx;

	.more-box {
		height: 100rpx;
		background: #fff;

		.more-btn {
			width: 200rpx;
			height: 60rpx;
			border: 1rpx solid rgba(213, 166, 90, 1);
			border-radius: 30rpx;
			font-size: 26rpx;
			font-weight: 400;
			color: rgba(168, 112, 13, 1);
			padding: 0;
			background: #fff;

			.cuIcon-right {
				font-size: 30rpx;
				margin-left: 10rpx;
			}
		}
	}
}

.tag {
	line-height: 62rpx;
	background: rgba(#ddd, 0.8);
	border-radius: 31rpx;
	font-size: 28upx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #999;
	padding: 0 30upx;
	margin-bottom: 20rpx;
	margin-right: 10rpx;
}
.server-modal-box {
	width: 750rpx;
	height: 100%;
	border-radius: 30rpx 30rpx 0 0;
	background: #fff;
	padding: 30rpx;
	.serve-btn {
		width: 690rpx;
		height: 80rpx;
		background: linear-gradient(90deg, rgba(240, 199, 133, 1), rgba(246, 214, 157, 1));
		border-radius: 40rpx;
		color: rgba(#fff, 0.9);
		margin-top: 40rpx;
	}

	.modal-head {
		margin-bottom: 30rpx;
		position: relative;
		.head-title {
			font-size: 32rpx;
			font-weight: bold;
		}

		.cuIcon-roundclosefill {
			position: absolute;
			font-size: 34rpx;
			color: #e0e0e0;
			top: 10rpx;
			right: 10rpx;
		}
	}

	.modal-content {
		overflow-y: auto;
		.serve-list {
			padding-bottom: 40rpx;

			.title-tag {
				width: 38rpx;
				height: 38rpx;
				margin-right: 20rpx;
			}

			.serve-title {
				font-size: 28rpx;
				font-weight: bold;
			}

			.serve-detail {
				text-align: left;
				font-size: 26rpx;
				color: #999;
				line-height: 42rpx;
				padding-left: 58rpx;
				margin-top: 20rpx;
			}
		}
	}
}
.tag-active {
	background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
	color: rgba(#fff, 0.9);
}

.tag-disabled {
	background: #f5f5f5;
}

.page-box {
	width: 100vw;
	height: 100vh;
	background-color: #f8f7fc;

	.head_box {
		.nav-title {
			font-size: 38rpx;
			font-weight: 500;
			color: #fff;
			text-align: center;
		}
	}

	.wrapper {
		width: 100%;

		.banner {
			.swiper {
				width: 100%;
				height: 423rpx;

				.activity-img {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}
		}
	}

	.content {
		.content-bg {
			// width: 100%;
			// height: 210rpx;
			// background-image: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210804142224.png);
			width: calc(100% - 60rpx);
			// height: 152rpx;
			margin: 49rpx 30rpx 20rpx 30rpx;
			background: #ffffff;
			border-radius: 20rpx;

			.content-box.one {
				display: flex;
				justify-content: space-between;

				.content-price {
					padding-top: 36rpx;
					padding-left: 34rpx;
					font-size: 34rpx;
					font-weight: bold;
					color: #f2a12d;

					text {
						font-size: 25rpx;
					}
				}

				.content-ico {
					width: 36rpx;
					height: 36rpx;
					margin-right: 28rpx;
					margin-top: 36rpx;

					image {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}
			}

			.content-box.two {
				// width: calc(100% - 60rpx);
				// height: 152rpx;
				// margin: 49rpx 30rpx 20rpx 30rpx;
				// background: #FFFFFF;
				// border-radius: 20rpx;

				.content-title {
					font-size: 28rpx;
					font-weight: 500;
					color: #000000;
					letter-spacing: 1rpx;
					padding: 28rpx 38rpx 29rpx 39rpx;
					box-sizing: border-box;
				}
			}
		}
		.content-box.three {
			width: calc(100% - 60rpx);
			margin: 49rpx 30rpx 20rpx 30rpx;
			background: #ffffff;
			border-radius: 20rpx;

			.box-list {
				display: flex;
				justify-content: space-between;
				padding: 34rpx 31rpx 29rpx 29rpx;
				box-sizing: border-box;

				.list-items {
					display: flex;

					.name {
						font-size: 24rpx;
						font-weight: 500;
						color: #666666;
					}

					.title {
						font-size: 24rpx;
						font-weight: 500;
						color: #1a1a1a;
					}
				}

				.tit {
					font-size: 24rpx;
					font-weight: 500;
					color: #666666;
				}

				.cuIcon-right {
					font-size: 34rpx;
					color: #f2a12d;
				}
			}

			.line {
				width: calc(100% - 60rpx);
				margin: 0 30rpx;
				height: 1rpx;
				background: #eeedf2;
			}
		}

		.content-box.four {
			// width: calc(100% - 60rpx);
			// margin: 49rpx 30rpx 20rpx 30rpx;
			.name {
				font-size: 28rpx;
				color: #1a1a1a;
				padding: 34rpx 31rpx 29rpx 56rpx;
				box-sizing: border-box;
			}
			.tab-box {
				display: flex;
				// justify-content: space-between;
				// margin: 36rpx 187rpx 23rpx 187rpx;

				.tab-list {
					font-size: 28rpx;
					color: #999999;
				}

				.active-tab-list {
					font-size: 28rpx;
					color: #1a1a1a;
					font-weight: bold;
					position: relative;

					&::after {
						position: absolute;
						top: 25rpx;
						left: 0rpx;
						content: '';
						display: inline-block;
						width: 115rpx;
						height: 13rpx;
						background: #f2a12d;
						border-radius: 7rpx;
						opacity: 0.7;
					}
				}
			}

			.content-detail {
				// width: calc(100% - 60rpx);
				// height: 100%;
				// margin: 24rpx 30rpx;

				image {
					width: 100%;
					border-radius: 30rpx;
				}
			}

			.content-record {
				width: calc(100% - 60rpx);
				margin: 24rpx 30rpx;
				padding-bottom: 30px;
				background: #ffffff;
				border-radius: 30px;

				.record-top {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 30rpx 94rpx 20rpx 94rpx;
					box-sizing: border-box;

					text {
						font-size: 26rpx;
						color: #1a1a1a;
					}
				}

				.record-line {
					width: calc(100% - 60rpx);
					margin: 24rpx 30rpx;
					height: 8rpx;
					background: #fafafa;
				}

				.record-bott {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 30rpx 94rpx 20rpx 94rpx;
					box-sizing: border-box;

					text {
						font-size: 26rpx;
						color: #666666;
					}
				}
			}
		}

		.foot-box {
			height: 260rpx;
			// margin-bottom: 260rpx;
		}
	}

	.footer-btn {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		display: flex;
		justify-content: space-between;
		background: #ffffff;
		border-radius: 24px 24px 0px 0px;

		.btn.left {
			margin: 10rpx 0rpx 60rpx 77rpx;
			width: 270rpx;
			height: 70rpx;
			background: #f2a12d;
			border-radius: 16rpx;
			font-size: 28rpx;
			font-weight: bold;
			color: #ffffff;
			line-height: 70rpx;
			text-align: center;
		}

		.btn.right {
			// margin: 10rpx 77rpx 60rpx 0rpx;
			// width: 270rpx;
			width: calc(100% - 40rpx);
			margin-left: 20rpx;
			margin-right: 20rpx;
			margin-top: 10rpx;
			margin-bottom: 60rpx;
			height: 70rpx;
			background: #f2a12d;
			border-radius: 35rpx;
			font-size: 28rpx;
			font-weight: bold;
			color: #ffffff;
			line-height: 70rpx;
			text-align: center;
		}
	}

	.model {
		.title {
			margin-top: 49rpx;
			margin-bottom: 51rpx;
			text-align: center;
			font-size: 32rpx;
			font-weight: bold;
			color: #1a1a1a;
		}

		.model-box {
			display: flex;
			flex-direction: column;

			.model-title {
				font-size: 28rpx;
				font-weight: 500;
				color: #1a1a1a;
				margin-bottom: 30rpx;

				&::before {
					content: '';
					display: inline-block;
					width: 14rpx;
					height: 14rpx;
					background: #f2a12d;
					border-radius: 50%;
					margin-left: 30rpx;
					margin-right: 15rpx;
				}
			}

			.model-dec {
				font-size: 24rpx;
				font-weight: 500;
				color: #666666;
				margin-left: 61rpx;
			}
		}

		.model-line {
			width: calc(100% - 90rpx);
			margin: 27rpx 30rpx 39rpx 60rpx;
			height: 1rpx;
			background: #f0f0f0;
		}

		.footer-btn {
			position: fixed;
			left: 0;
			bottom: 38rpx;
			width: 100%;
			height: 100rpx;

			.btn {
				width: calc(100% - 40rpx);
				height: 100rpx;
				background: #f2a12d;
				border-radius: 50rpx;
				margin-left: 20rpx;
				margin-right: 20rpx;
				font-size: 30rpx;
				font-weight: bold;
				color: #fff;
				line-height: 100rpx;
				text-align: center;
				letter-spacing: 1rpx;
			}
		}
	}

	.kind-model {
		.content-top {
			position: fixed;
			left: 0rpx;
			right: 0rpx;
			top: 0rpx;
			background-color: #fff;
			z-index: 99;

			.content-top-box {
				display: flex;
				justify-content: space-between;
				// margin: 40rpx 30rpx;
				margin: 40rpx 30rpx 0rpx 30rpx;
				padding-bottom: 39rpx;
				border-bottom: 2rpx solid #f5f5f5;

				.content-img {
					width: 120rpx;
					height: 120rpx;
					margin-right: 24rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
				}

				.content-name {
					display: flex;
					flex-direction: column;

					.title {
						margin-bottom: 48rpx;
						font-size: 28rpx;
						font-weight: 500;
						color: #000000;
					}

					.price {
						font-size: 30rpx;
						font-weight: bold;
						color: #f31717;

						text {
							font-size: 25rpx;
						}
					}
				}

				.content-close {
					width: 32rpx;
					height: 32rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.content-box {
			margin-top: 240rpx;
			margin-left: 30rpx;

			.content-title {
				font-size: 30rpx;
				font-weight: bold;
				color: #000000;
			}

			.content-trav {
				margin-top: 47rpx;
				display: flex;
				flex-direction: column;

				text {
					font-size: 26rpx;
					font-weight: 500;
					color: #333333;
				}

				.travel-btn {
					width: 260rpx;
					height: 70rpx;
					background: #f5f7fa;
					margin-top: 28rpx;
					border-radius: 8rpx;
					font-size: 26rpx;
					font-weight: 500;
					color: #1a1a1a;
					line-height: 70rpx;
					text-align: center;
				}

				.activite-travel-btn {
					width: 260rpx;
					height: 70rpx;
					background: #f2a12d;
					border-radius: 8rpx;
					font-size: 26rpx;
					font-weight: 500;
					color: #fff;
					line-height: 70rpx;
					text-align: center;
				}
			}

			.content-peo {
				margin-top: 39rpx;
				display: flex;
				flex-direction: column;

				text {
					font-size: 26rpx;
					font-weight: 500;
					color: #333333;
					margin-bottom: 28rpx;
				}

				.people-box {
					display: flex;
					flex-direction: row;

					.people-btn {
						width: 122rpx;
						height: 70rpx;
						background: #f5f7fa;
						border-radius: 8rpx;
						font-size: 26rpx;
						font-weight: 500;
						color: #1a1a1a;
						line-height: 70rpx;
						margin-right: 44rpx;
						text-align: center;
					}

					.activity-btn {
						width: 122rpx;
						height: 70rpx;
						background: #f2a12d;
						border-radius: 8rpx;
						font-size: 26rpx;
						font-weight: 500;
						color: #fff;
						line-height: 70rpx;
						text-align: center;
					}
				}
			}

			.content-date {
				margin-top: 19rpx;
				display: flex;
				justify-content: space-between;

				.data.left {
					font-size: 26rpx;
					font-weight: 500;
					color: #333333;
					letter-spacing: 1rpx;
				}

				.data.right-box {
					display: flex;
					margin-right: 20rpx;

					text {
						font-size: 26rpx;
						font-weight: 500;
						color: #1a1a1a;
						letter-spacing: 1rpx;
					}

					.cuIcon-right {
						font-size: 32rpx;
						color: #f2a12d;
					}
				}
			}

			.content-math {
				margin-top: 51rpx;
				display: flex;
				justify-content: space-between;

				.data.left {
					font-size: 26rpx;
					font-weight: 500;
					color: #333333;
					letter-spacing: 1rpx;
				}

				.data.right-box {
					display: flex;
					margin-right: 20rpx;

					.icon-add-fill {
						color: #f2a12d;
					}
				}
			}

			.content-input {
				margin-top: 51rpx;

				.input-box {
					display: flex;
					margin-bottom: 56rpx;

					label {
						width: 25%;
						font-size: 26rpx;
						font-weight: 500;
						color: #333333;
						letter-spacing: 1rpx;

						&::after {
							content: '*';
							color: #f31717;
							font-size: 26rpx;
						}
					}

					input {
						width: 75%;
						outline: 0;
						border-bottom: 1rpx solid #f0f0f0;
						margin-right: 20rpx;
					}

					input::-webkit-input-placeholder {
						color: #999999;
						font-size: 26rpx;
						letter-spacing: 1rpx;
					}
				}
			}

			.footer-info {
				height: 1rpx;
				margin-bottom: 200rpx;
			}

			.footer-btn {
				position: fixed;
				left: 0;
				bottom: 38rpx;
				width: 100%;
				height: 100rpx;
				background-color: #fff;
				z-index: 99;

				.btn {
					width: calc(100% - 40rpx);
					height: 100rpx;
					background: #f2a12d;
					border-radius: 45rpx;
					margin-left: 20rpx;
					margin-right: 20rpx;
					font-size: 30rpx;
					font-weight: bold;
					color: #fff;
					line-height: 100rpx;
					text-align: center;
				}
			}
		}
	}
}
</style>
